<template>
  <header>
    <a class="logo">LOGO</a>
    <ul>
      <li v-for="item in items"> {{ item.text }} </li>
    </ul>
  </header>
</template>

<script>
export default {
  data () {
    return {
      items: [
        { id: 1, text: '下载' },
        { id: 1, text: '消息' },
        { id: 1, text: '退出' }
      ]
    }
  }
}
</script>

<style scoped>
  ul,li,ol{
    margin:0;
    padding:0;
  }
  header{
    position: fixed;
    width:100%;
    height:60px;
    background: #ff6579;
    z-index: 101;
  }
  .logo{
    display: block;
    float:left;
    width:180px;
    height:100%;
    background: #e25a6b;
    color:#fff;
    font-size:24px;
    line-height: 60px;
    text-align:center;
  }
  header ul{
    float:right;
  }
  header ul li{
    display: block;
    float:left;
    padding:0 10px;
    border-right:1px solid #ff798b;
    line-height:60px;
    color:#fff;
    cursor:pointer;
  }
  header ul li:hover{
    background: #d05161;
  }
</style>
